<template>
  <div id="mainMajor">
    <!-- 头部 -->
    <div class="headerWp">
      <div class="headerMajor">
        <i class="iconfont icon-xiazai6" @click="$router.push('/')"></i>
        <div>
          <div class="iptWap">
            <input
              class="font_254"
              @focus="focusFn"
              @blur="blurFn"
              type="text"
              placeholder="请输入课程名称"
            />
            <i class="iconfont icon-sousuo"></i>
          </div>
          <span class="iptTxt font_217">取消</span>
        </div>
      </div>
    </div>
    <div class="sectionmainMajor">
      <!-- 分类、排序、筛选 -->
      <ul class="nav font_271">
        <li v-for="(item,index) in tabCofFnTitArr" :key="index" @click="tabCofFn(item)">
          <a href="javascript:;" :style=" `color:${tabTitle==item?'#0894ec':''}`">
            {{item}}
            <i class="iconfont icon-xiajiantou"></i>
          </a>
        </li>
      </ul>
      <!-- 主体 -->
      <div class="contentBody">
        <div class="contentWap">
          <!-- 有数据 -->
          <ul v-if="handlerArr.length">
            <li v-for="(item,index) in handlerArr" :key="index">
              <div class="tuWap">
                <img src="@/assets/img/main/majorimg.png" alt />
                <span>{{item.typecid}}</span>
              </div>
              <div class="itemRight">
                <div class="font_29 color_111 ellipsis">{{item.name}}</div>
                <div>
                  <span>{{item.author}}</span>
                  <div>
                    <i class="iconfont icon-wode"></i>
                    <span>{{item.studyNum}}</span>
                  </div>
                </div>
                <div class="color_f24334 font_188">
                  ￥
                  <span class="font_253">{{item.price.toFixed(1)}}</span>
                </div>
              </div>
            </li>
          </ul>
          <!-- 没数据 -->
          <div v-else class="nodata">
            <div>
              <img src="@/assets/img/main/data-none.png" alt />
              <p>亲，暂无课程数据，小编正在整理中</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div class="zzcWap" v-show="isZzc">
        <div class="zzc">
          <!-- 分类 -->
          <div class="moreContent" v-if="tabTitle=='分类'">
            <ul class="moreLeft" ref="lileft">
              <li
                v-for="(item,index) in tabClassifyArr"
                :key="index"
                :class="tabClassifyTit==item?'typeActive':''"
                @click="tabClk(item,index)"
              >{{item}}</li>
            </ul>
            <!-- 分类右 -->
            <div class="moreRight">
              <ul class="zhiye dis_block">
                <li @click="allFn">全部</li>
                <li>健康管理师</li>
              </ul>
              <ul class="zhongyaoxue">
                <li @click="allFn">全部</li>
                <li>中药学专业知识(一)</li>
                <li>中药学专业知识(二)</li>
                <li>中药学综合知识与技能</li>
              </ul>
              <ul class="yaoxue">
                <li @click="allFn">全部</li>
                <li>药学专业知识(一)</li>
                <li>药学专业知识(二)</li>
                <li>药学综合知识与技能</li>
              </ul>
              <ul class="zhiye">
                <li @click="allFn">全部</li>
                <li>药事管理与法规</li>
              </ul>
            </div>
          </div>
          <!-- 排序 -->
          <div class="order" v-else-if="tabTitle=='排序'">
            <ul>
              <li v-for="(item,index) in orderArr" :key="index" @click="orderFun(item)">
                <div :class="item.isAct?'orderActive':''">
                  <div>按{{item.name}}排序</div>
                  <i class="iconfont icon-duigou"></i>
                </div>
              </li>
            </ul>
          </div>
          <!-- 筛选 -->
          <div class="filterTab" v-else-if="tabTitle=='筛选'">
            <div class="filterTop">
              <div>
                <!-- 类型 -->
                <div class="pad_b181">
                  <div class="color_777 font_189 pad_b181">按类型</div>
                  <ul>
                    <li
                      v-for="(item,index) in typeFilterArr"
                      :key="index"
                      @click="tabFilterTypeFn(item)"
                    >
                      <a
                        href="javascript:;"
                        :style=" `${item==tabFilterTit1?'color:#0894ec;border-color:#0894ec;background-color: #e8f1ff;':''}`"
                      >{{item}}</a>
                    </li>
                  </ul>
                </div>
                <div class="clear"></div>
                <hr />
                <!-- 年份 -->
                <div class="pad_t181">
                  <div class="color_777 font_189 pad_b181">按年份</div>
                  <ul>
                    <li
                      v-for="(item,index) in yearFilterArr"
                      :key="index"
                      @click="tabFilterYearFn(item)"
                    >
                      <a
                        href="javascript:;"
                        :style=" `${item==tabFilterTit2?'color:#0894ec;border-color:#0894ec;background-color: #e8f1ff;':''}`"
                      >{{item}}</a>
                    </li>
                  </ul>
                </div>
                <div class="clear"></div>
              </div>
            </div>
            <div class="filterBottom">
              <div @click="emptyFilter">清空筛选</div>
              <div class="color_0894ec" @click="filterConfirmClk">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { setMajor, getMajor, removeMajor } from "@/utils/cookies.js";
import morecontent from "./morecontent";
export default {
  data() {
    return {
      isZzc: false,
      text: "",
      tabTitle: "分类",
      tabTitle2: "",
      tabFilterTit1: "全部",
      tabFilterTit2: "全部",
      tabCofFnTitArr: ["分类", "排序", "筛选"],
      tabClassifyArr: ["职业技能鉴定", "中药学", "药学", "法规"],
      tabClassifyTit: "职业技能鉴定",
      orderTitle: "arr",
      typeFilterArr: ["全部", "录播", "专栏", "套餐"],
      yearFilterArr: [
        "全部",
        "2016",
        "2017",
        "2018",
        "2019",
        "2020",
        "2021",
        "2022",
      ],
      orderArr: [
        {
          name: "默认",
          isAct: true,
        },
        {
          name: "时间",
          isAct: false,
        },
        {
          name: "价格",
          isAct: false,
        },
      ],
      handlerArrFn: {
        arr: this.majorArrFn,
        publishTime: this.timeArrFn,
        price: this.priceArrFn,
        filterMajor: this.filterMajorDateFn,
      },
    };
  },
  methods: {
    ...mapActions("main", ["filterMajorFn"]),
    filterConfirmClk() {
      this.orderTitle = "filterMajor";
      this.isZzc = false;
    },
    filterMajorDateFn() {
      if (this.tabFilterTit2 == "全部") {
        return this.majorArr;
      } else {
        return this.majorArr.filter((v) => {
          if (v.year == this.tabFilterTit2) {
            return v.year == this.tabFilterTit2;
          }
        });
      }
    },
    emptyFilter() {
      this.tabFilterTit1 = "全部";
      this.tabFilterTit2 = "全部";
    },
    tabFilterTypeFn(val) {
      this.tabFilterTit1 = val;
    },
    tabFilterYearFn(val) {
      this.tabFilterTit2 = val;
    },
    // 排序
    orderFun(val) {
      this.orderArr.forEach((v) => {
        v.isAct = false;
      });
      val.isAct = true;
      this.handlerOrderArr(val.name);
    },
    handlerOrderArr(name) {
      if (name == "时间") {
        this.orderTitle = "publishTime";
      } else if (name == "价格") {
        this.orderTitle = "price";
      } else {
        this.orderTitle = "arr";
      }

      this.isZzc = false;
    },
    // 默认数组
    majorArrFn() {
      return this.majorArr;
    },
    // 按时间排序
    timeArrFn() {
      this.majorArr.sort(function (a, b) {
        return (
          Date.parse(b.publishTime.replace(/-/g, "/")) -
          Date.parse(a.publishTime.replace(/-/g, "/"))
        );
      });
      return this.majorArr;
    },
    // 按价格排序
    priceArrFn() {
      this.majorArr.sort(function (a, b) {
        return a.price - b.price;
      });
      return this.majorArr;
    },
    // 分类
    tabCofFn(item) {
      this.tabTitle2 = this.tabTitle;
      this.tabTitle = item;
      if (this.isZzc) {
        if (this.tabTitle == this.tabTitle2) {
          this.isZzc = false;
        } else {
          this.isZzc = true;
        }
      } else {
        this.isZzc = true;
      }
    },
    allFn() {
      if (!this.text.trim().length) {
        this.isZzc = false;
        return;
      }
      setMajor(this.text);
      this.isZzc = false;
      this.filterMajorFn(getMajor());
    },
    tabClk(item, index) {
      if (item != "职业技能鉴定") {
        this.tabClassifyTit = item;
      }
      let mainUl = document.querySelectorAll(".moreRight>ul");
      for (let i = 0; i < mainUl.length; i++) {
        mainUl[i].style.display = "none";
      }
      mainUl[index].style.display = "block";
    },
    // 获取焦点
    focusFn() {
      document.querySelector(".iptWap").style.width = "88%";
      document.querySelector(".iptTxt").style =
        "display:block;margin-left:0.181rem";
    },
    // 失去焦点
    blurFn() {
      document.querySelector(".iptWap").style.width = "100%";
      document.querySelector(".iptTxt").style.display = "none";
    },
  },
  computed: {
    ...mapState("main", ["majorArr"]),
    handlerArr() {
      return this.handlerArrFn[this.orderTitle]();
    },
  },
  components: { morecontent },
  mounted() {
    this.filterMajorFn(getMajor());
  },
  // beforeRouteLeave(to, from, next) {
  //   if (to.fullPath != "/datas") {
  //     removeMajor();
  //   }
  //   next();
  // },
};
</script>
<style scoped src="../.././css/main.css"></style>
<style scoped src="../.././css/main/iconfont.css"></style>
<style scoped src="../.././css/main/same.css"></style>
<style scoped src="../.././css/main/mainMajor.css"></style>
<style scoped src="../.././css/main/mainmorecont.css"></style>

<style scoped>

</style>